@import "../../app";

body{
  background: @bg-base;
}
.mall-index{
  background: @bg-base;
  padding-top: 30px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.swiper-wrap {
  width: 690px;
  margin: 0 auto;
  margin-bottom: 20px;
  box-sizing: border-box;
  .swiper {
    width: 100%;
  }

  .swiper-item {
    width: 100%;
  }

  .swiper-img {
    width: 100%;
    height: 300px;
  }
}
.mall-index{
  .scroll-view-nav{
    padding: 0 30px;
    margin: 0 auto;
    margin-bottom: 20px;
    box-sizing: border-box;
    text-align: center;
   /* .flex-base;
    justify-content: center;*/
    .scroll-item{
      width: auto;
      padding:0 30px;
      display: inline-block;
      text-align: center;
    }
  }
  .nav-active{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    width: 100%;
    // animation: navactive 1s ease-in-out infinite;
  }
  .block{
    height: 100px;
    width: 100%;
  }
  .personnel-desc{
    margin-top: 30px;
    text-align: justify;
  }
}

@keyframes navactive {
  0% {transform: scale3d(0.5,0.5,0.5)}
  100% {transform: scale3d(1,1,1)}
}

.list-14{
  .content-30;
  padding-top: 0;
  .flex-base;
  flex-wrap: wrap;
}
.list-14-item{
  width: 48.5%;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 10px;
  .item-img{
    width: 330px;
    height: 330px;
    border-radius: 15px 15px 0 0;
    display: block;
  }
  .info{
    .content-20;
  }
  .title{
    .text-overflow;
    margin-bottom: 10px;
  }
}

.list-title{
  font-size: @font-size-28;
  line-height: 40px;
}

.list-price{
  font-size: @font-size-28;
  color: @font-orange-color;
}

.list-small{
  font-size: @font-size-22;
}

.mall-detail{
  background: #fff;
  .swiper-wrap {
    width: 750px;
    max-width: 100%;
    height: 750px;
    margin: 0 auto;
    box-sizing: border-box;
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-item {
      width: 100%;
    }

    .swiper-img {
      width: 100%;
      height: 750px;
    }
  }
  .column-title{
    .column-name{
      font-weight: normal;
    }
  }
}

.share-info{
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  .line{
    padding-left: 30px;
    box-sizing: border-box;
    .flex-base;
    align-items: center;
    .title{
      flex-grow: 2;
      font-size: 34px;
      .text-overflow;
    }
    .btn-share{
      flex-shrink: 0;
      background: @bg-base;
    }
    .price{
      flex-grow: 2;
      .list-small{
        font-size: @font-size-22;
        color: @font-orange-color;
      }
      .list-price{
        font-size: 38px;
        padding-right: 20px;
      }
      .list-old-price{
        color: #b2b2b2;
        font-size: @font-size-24;
        text-decoration: line-through;
      }
    }
    .all{
      font-size: @font-size-24;
      .count{
        color: @font-orange-color;
      }
    }
  }
  .line2{
    padding: 0 30px;
  }

}
.list-small{
  font-size: @font-size-22;
}
.select-spec{
  width: 100%;
  background: #fff;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  box-sizing: border-box;
  .flex-base;
  align-items: center;
  font-size: @font-size-30;
  .title{
    flex-grow: 2;
    .text-overflow;
    padding-right: 20px;
  }
  .drop-down-con{
    flex-shrink: 0;
    .flex-base;
    align-items: center;
    .con{
      padding-right: 20px;
      font-size: @font-size-30;
    }
    .drop-down-icon{
      line-height: 0;
      display: inline-block;
      padding: 0;
    }
  }
}



// 鲜花定制-首页
.mall-custom-index{
  padding: 30px 0;
}

// 确认订单
.mall-order-confirm{
  .order-address{
    .bg-line;
    .none-address{
      .content-30;
      height: 160px;
      .flex-base;
      justify-content: flex-start;
      align-items: center;
      color: #fff;
      font-size: @font-size-32;
    }
    .drop-down-icon{
      margin-top: 5px;
    }
  }
  .order-spec{
    .content-30;
    background: #fff;
    .flex-base;
    border-bottom: 1.1px solid @border-color;
    align-items: center;
    .l{
      flex-grow: 2;
      .flex-base;
      align-items: center;
      max-width: 100%;
      overflow: hidden;
      .img{
        width: 120px;
        height: 120px;
        margin-right: 10px;
        border-radius: 10px;
        flex-shrink: 0;
      }
      .info{
        flex-grow: 2;
        overflow: hidden;
        .list-title{
          font-size: @font-size-32;
         .text-overflow;
          margin-bottom: 15px;
        }
      }
      .line{
        padding: 0 10px;
      }
      .price{
        color: @font-base-color;
        font-size: @font-size-28;
      }
      .list-small{
        color: @font-base-color;
      }
      .list-title{
        max-width: 85%;
      }
    }
    .r{
      flex-shrink: 0;
      font-size: @font-size-30;
      .list-price{
        color: @font-base-color;
        margin-bottom: 15px;
      }
    }
    .r-custom{
      align-items: flex-end;
    }
  }
  .select-spec{
    border-bottom: 1.1px solid @border-color;
  }
}

.has-address{
  .flex-base;
  align-items: center;
  padding: 30px;
  .address-icon{
    width: 42px;
    height: 42px;
    margin-right: 20px;
    flex-shrink: 0;
  }
  .info{
    color: #fff;
    flex-grow: 2;
    .name{
      font-size: @font-size-30;
      .text-overflow;
      margin-bottom: 10px;
    }
    .address{
      font-size: 26px;
    }
  }
  .drop-down-icon{
    flex-shrink: 0;
  }
}

.color{
  color: @font-orange-color;
}

.none-address-tip{
  .content-30;
  font-size: @font-size-24;
  color: @font-orange-color;
}

.pay-success{
  .apply-success{
    .content{
      background: #fff;
      padding: 40px;
      box-sizing: border-box;
      text-align: center;
      .success-icon{
        width: 100px;
        height: 100px;
      }
      .title{
        font-size: 34px;
        padding: 25px 0 15px 0;
      }
      .desc{
        font-size: @font-size-24;
        color: @font-gray-color;
      }
      .tel{
        font-size: @font-size-24;
        color: @font-light-color;
        padding-top: 20px;
      }
    }
    .btn-group{
      padding: 70px;
      .flex-base;
      .btn{
        text-align: center;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 280px;
        border: 1.1px solid @font-light-color;
        color: @font-light-color;
        border-radius: 100px;
      }
      .btn-active{
        .bg-line;
        color: #fff;
        font-size: @font-size-30;
      }
    }
  }
  .has-address{
    background: #fff;
    color: @font-base-color;
    .info{
      .name{
       color: @font-base-color;
      }
      .address{
        color: @font-gray-color;
      }
    }
    .title{
      font-size: @font-size-30;
    }
  }
}

.mall-custom-center{
  background: #fabe00;
  .header-pic{
    width: 100%;
    height: 442px;
  }
  .center-con{
    .content-30;
    padding-top: 0;
    .custom-item{
      .flex-base;
      align-items: center;
      background: #fff;
      margin-bottom: 30px;
      border-radius: 10px;
      .content-30;
      .custom-icon{
        width: 100px;
        height: 100px;
        border-radius: 200px;
      }
      .info{
        padding: 0 20px;
        flex-grow: 2;
        .list-title{
          font-size: @font-size-32;
          margin-bottom: 10px;
        }
      }
      .btn-banli{
        flex-shrink: 0;
        width: 150px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        text-align: center;
        color: #fff;
        font-size: @font-size-24;
      }
      
      .btn1{
        background: linear-gradient(to right, #ff5fc0, #ffb5b5);
      }
      .btn2{
        background: linear-gradient(to right, #ff5b01, #ffbd4b);
      }
      .btn3{
        background: linear-gradient(to right, #0ec08b, #bade01);
      }
      .btn4{
        background: linear-gradient(to right, #307eff, #3dd3ff);
      }
    }
  }
}

.address-list{
  margin-top: 30px;
  .item-address{
    padding: 20px 30px;
    background: #fff !important;
    margin-bottom: 30px;
    .flex-base;
    justify-content: flex-start;
    align-items: center;
    .select-icon{
      flex-shrink: 0;
      padding-right: 20px;
      width: 40px;
      height: 40px;
    }
    .info{
      flex-grow: 2;
      .line{
        .flex-base;
        align-items: center;
        .name{
          font-size: @font-size-32;
        }
        .tel{
          font-size: @font-size-32;
        }
        .desc{
          color: @font-gray-color;
          font-size: 26px;
          line-height: 40px;
          flex-grow: 2;
        }
        .btn-edit{
          flex-shrink: 0;
          height: 50px;
          padding: 0 30px;
          text-align: center;
          line-height: 50px;
          border-radius: 50px;
          border: 1.1px solid @font-light-color;
          color: @font-light-color;
          font-size: @font-size-24;
        }
      }
    }
  }
}

  .close {
    background-color: rgb(179, 179, 179);
    position: absolute;
    left: 710px;
    top: 567px;
    width: 20px;
    height: 20px;
    z-index: 56;
  }


.address-edit{
  .from-wrap{
    padding: 0;
    .item-group{
      padding: 0 30px;
    }
  }
}
.btn-line-submit{
  padding: 0 30px;
  box-sizing: border-box;
  width: 690px;
  margin:0 auto;
  border: none;
  outline: none;
}
.btn-delete{
  color: @font-light-color;
  margin-top: 20px;
  text-align: center;
}

// 购买规格选择
.spec-fixed{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  left: 0;
  top: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 500ms ease-in-out;
  .spec-content{
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-height: 80%;
    overflow: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    .item{
      .content-30;
      border-bottom: 1.1px solid @border-color;
      .option{
        margin-top: 20px;
        .flex-base;
        justify-content: flex-start;
        flex-wrap: wrap;
        .op{
          height: 60px;
          line-height: 60px;
          text-align: center;
          border-radius: 10px;
          font-size: 26px;
          color: #333333;
          padding: 0 30px;
          display: block;
          margin-right: 30px;
          border: 1.1px solid @border-color;
          margin-bottom: 10px;
        }
        .op-active{
          .bg-line;
          color: #fff;
        }
      }
    }
    .overflow{
      overflow-y: scroll;
      width: 100%;
    }
    .item1{
      flex-shrink: 0;
      .flex-base;
      align-items: center;
      .item1-img{
        width: 150px;
        height: 150px;
        margin-right: 30px;
        border-radius: 10px;
        flex-shrink: 0;
      }
      .info{
        flex-grow: 2;
        .list-price{
          font-size: @font-size-32;
          margin-bottom: 20px;
        }
      }
      .btn-close{
        width: 20px;
        height: 25px;
        flex-shrink: 0;
        align-self: flex-start;
        position: absolute;
        right: 40px;
        top: 20px;
      }
    }
    .buy-count{
      margin-bottom: 30px;
      .flex-base;
      .spec-count-control{
        width: 165px;
        height: 50px;
        border: 1.1px solid @border-color;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        font-size: @font-size-30;
        color: #333;
        .flex-base;
        align-items: center;
        overflow: hidden;
        .btn{
          display: block;
          line-height: 0;
          width: 33.33%;
          // justify-self: center;
          margin: 0 auto;
        }
        .reduce{
          width: 25px;
          height: 4px;
          padding: 20px 0;
        }
        .disabled{
          opacity: 0.3;
        }
        .add{
          width: 25px;
          height: 25px;
          padding: 10px 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count{
          height: 50px;
          line-height: 50px;
          border-left: 1PX solid @border-color;
          border-right: 1PX solid @border-color;
          margin: 0;
          box-sizing: border-box;
        }
      }
    }
    .item4{
      flex-shrink: 0;
      padding: 0;
      border-bottom: none;
    }
    .page-submit{
      position: initial;
    }
  }
}
.spec-fixed-active{
  top: 0;
}
